{% load my_tags %}
{% get_categorys as categorys %}
<style>
.navbar-default {
    background-color:#e9e9e2 ;
}
.dbds{
    color: #8a6d3b;
    font-size: 20px;
    text-decoration: none;
}

.download-btn {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.qrcode {
    position: absolute;
    top: 100%;
    left: 85%;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.qrcode img {
    width: 150px;
    height: 150px;
}
.nav-tabs{
    background-color: #545652;
}
.nav-tabs a{
    color: lightgray;
}
</style>
<style>
     *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    ul li, li{
        list-style: none;
    }
    .group1 {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
        list-style: none;
    }
    .group1 li {
        width: 20%;
        flex: 1 1 0;
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        text-align: center;
        justify-content: space-between;

    }
</style>
<ul class="nav nav-tabs">
  <li role="presentation"><a href="#">豆瓣</a></li>
  <li role="presentation"><a href="#">读书</a></li>
  <li role="presentation"><a href="#">电影</a></li>
  <li role="presentation"><a href="#">音乐</a></li>
  <li role="presentation"><a href="#">博客</a></li>
  <li role="presentation"><a href="#">同城</a></li>
  <li role="presentation"><a href="#">小组</a></li>
  <li role="presentation"><a href="#">阅读</a></li>
  <li role="presentation"><a href="#">FM</a></li>
  <li role="presentation"><a href="#">时间</a></li>
  <li role="presentation"><a href="#">豆品</a></li>
</ul>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="dbds" href="{% url 'main:index' %}">豆瓣读书</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="{% url 'main:index' %}">首页 <span class="sr-only">(current)</span></a></li>
          {% for c in categorys %}
              {% if c.children|length == 0 %}
                    <li><a href="#">{{ c.title }}</a></li>
              {% else %}
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ c.title }}<span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        {% for c2 in c.children %}
                            <li><a href="{% url 'main:index' %}?category={{ c2.id }}">{{ c2.title }}</a></li>
                        {% endfor %}

                      </ul>
                    </li>
              {% endif %}
          {% endfor %}

      </ul>
      <form class="navbar-form navbar-left" method="get" action="/search/">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="书名、作者" name="q">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
           <li><a class="download-btn">下载客户端</a></li>
            <div class="qrcode" style="display: none;">
                <img src="/media/imgs/二维码.png" alt="二维码">
            </div>
          {% if request.user.is_authenticated %}
               <li><a href="{% url 'user:article_create' %}">添加书籍</a></li>
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ request.user.username }} <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="{% url 'user:center' %}">个人中心</a></li>
                  <li><a href="{% url 'user:article_list' %}">文章管理</a></li>
                  <li><a href="{% url 'main:history'%}">浏览历史记录</a></li>
                <li><a href="{% url 'user:change_head' %}">修改头像</a></li>
                <li><a href="{% url 'user:change_password' %}">修改密码</a></li>

                <li role="separator" class="divider"></li>
                <li><a href="{% url 'user:logout' %}">退出</a></li>
              </ul>
          </li>
          {% else %}
          <li><a href="{% url 'user:login' %}">登录</a></li>
          <li><a href="{% url 'user:register' %}">注册</a></li>
          {% endif %}


      </ul>
    </div>
  </div>
<script>
    document.querySelector('.download-btn').addEventListener('mouseover', function() {
        document.querySelector('.qrcode').style.display = 'block';
    });

    document.querySelector('.download-btn').addEventListener('mouseout', function() {
        document.querySelector('.qrcode').style.display = 'none';
    });
</script>
</nav>